<!-- 添加试题-简答题 -->
<template>
  <div id="AddShortAnswerQuestions" :class="{'isCreativeCourse':isCreativeCourse}">
    <div class="courses-nav jx-content">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="题目类型 :">
          <el-select :disabled="disabledQuestionType" v-model="questionTypeMessage" placeholder="请选择" @change="getTopicModel">
            <el-option v-for="(item,index) in questionTypeList" :key="index" :label="item.message" :value="item.type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="试题章节 :">
          <el-select :clearable="false" v-model="addForm.chapterId" placeholder="请选择" @change="getchapterModel">
            <el-option v-for="(item,index) in chapterList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="jx-content">
      <div class="answer-editor">
        <h2 class="jx-title">试题题目</h2>
        <mavonEditor ref="question"></mavonEditor>
      </div>
      <div class="answer-editor">
        <h2 class="jx-title">参考答案</h2>
        <mavonEditor ref="answer"></mavonEditor>
        <!-- <el-input v-model="addForm.answer[0].content" type="textarea" :rows="5"></el-input> -->
      </div>

      <div class="btn-group">
        <button v-if="!rowId" @click="addQuestion" class="button-style question-submit">保 存</button>
        <button v-if="rowId" @click="editQuestion" class="button-style question-submit">保存修改</button>
      </div>
    </div>
  </div>
</template>
<script>
import mavonEditor from "../../../components/mavonEditor";
import axios from "axios";
import $ from "jquery";
export default {
  components: { mavonEditor },
  data() {
    return {
      //是否是创作课程页面下
      isCreativeCourse: true,
      questionTypeMessage: "简答题",
      //题目类型数组
      questionTypeList: [],
      //章节数组
      chapterList: [],
      //锁定题型
      disabledQuestionType: false,
      addForm: {
        //章节ID
        chapterId: "",
        //题目类型
        questionType: 4,
        //问题描述，题干
        content: "",
        htmlContent: "",
        //备选答案
        answer: [
          {
            content: "",
            htmlContent: ""
          }
        ]
        //查重百分比
        //duplicatePercent:50
      },
      rowId: "",
      //取searchForm
      itemBankSearchForm: this.$localstorage.getLocalStorage("searchForm"),
      //取itemBankName
      itemBankName: this.$localstorage.getLocalStorage("itemBankName")
    };
  },
  created() {
    //验证页面是不是创建课程的页面
    let currentPath = this.$router.history.current.path;
    if (currentPath.match("CreativeCourse")) {
      this.isCreativeCourse = true;
    } else {
      this.isCreativeCourse = false;
    }
    //CreativeCourse
    console.log(this.$router.history.current.path, 66666);
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getTopicSelected();
      this.getRowData();
      this.reGetChapter();
    },
    reGetChapter() {
      let self = this;
      self.$http
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/chapter/list/owner"
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.$nextTick(() => {
              self.tableData = res.data;
            });
            //已经有章节,判断导航显示
            self.$parent.mark = false;
            self.$parent.chaperFlag = false;
          } else if (res.code == "404") {
            self.tableData = "";
            //暂无章节,判断导航显隐藏
            this.$parent.mark = true;
            this.$parent.chaperFlag = false;
          }
        })
        .catch(err => {
          self.$message.error(res.message);
        });
    },
    //提交验证
    reQuestion() {
      let that = this;
      let addForm = that.addForm;

      //添加问题
      that.addForm.content = that.$refs["question"].value;
      that.addForm.htmlContent = that.$refs.question.getRender();
      //添加答案
      that.addForm.answer[0].content = that.$refs["answer"].value;
      that.addForm.answer[0].htmlContent = that.$refs.answer.getRender();

      if (!addForm.chapterId) {
        that.$message.warning("请选择试题章节");
        return false;
      }
      if (addForm.content.match(/^\s*$/)) {
        that.$message.warning("请填写题干");
        return false;
      }
      if (addForm.answer[0].content.match(/^\s*$/)) {
        that.$message.warning("请填写答案内容");
        return false;
      }
      return true;
    },
    //添加试题
    addQuestion() {
      var that = this;
      //提交前验证
      let isNull = that.reQuestion();
      if (!isNull) {
        return;
      }
      const loading = that.$loading({
        lock: true,
        text: "正在保存中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      //答案与model绑定
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/businessType/1/question-repository/question",
          that.addForm
        )
        .then(function(res) {
          loading.close();
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message({
                message: "添加成功",
                type: "success"
              });
              that.$router.push({
                name: that.itemBankName,
                params: {
                  searchForm: that.itemBankSearchForm
                }
              });
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //通过id获取题目信息
    getRowData() {
      var that = this;
      let rowId = that.$route.query.rowId;
      that.rowId = rowId;
      if (!rowId) {
        return;
      }
      that.disabledQuestionType = true;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/businessType/1/question-repository/question/" +
            rowId
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.addForm = res.data.data;
              that.setEditDom();
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //回填
    setEditDom() {
      let that = this;
      let addForm = that.addForm;
      that.$refs.question.changeVal(addForm.content);
      that.$refs.answer.changeVal(addForm.answer[0].content);
    },
    //修改试题
    editQuestion() {
      var that = this;
      let rowId = that.rowId;
      //提交前验证
      let isNull = that.reQuestion();
      if (!isNull) {
        return;
      }
      const loading = that.$loading({
        lock: true,
        text: "正在保存中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      axios
        .put(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/businessType/1/question-repository/question/" +
            rowId,
          that.addForm
        )
        .then(function(res) {
          loading.close();
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message({
                message: "修改成功",
                type: "success"
              });
              that.$router.push({
                name: that.itemBankName,
                params: {
                  searchForm: that.itemBankSearchForm
                }
              });
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //获取题目类型和章节下拉
    getTopicSelected() {
      var that = this;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/businessType/1/question-repository/dropdown-list"
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.message);
              //赋值题目类型
              let questionTypeList = res.data.data.questionTypeList;
              that.questionTypeList = questionTypeList;
              //赋值章节列表
              let chapterList = res.data.data.chapterList;
              that.chapterList = chapterList;
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //获取题目类型
    getTopicModel(val) {
      this.addForm.questionType = val;
      switch (val) {
        case 1:
          this.$router.push({
            path: "addChoiceQuestion"
          });
          break;
        case 2:
          this.$router.push({
            path: "addJudge"
          });
          break;
        case 3:
          this.$router.push({
            path: "addFillInTheBlanks"
          });
          break;
        case 4:
          this.$router.push({
            path: "AddShortAnswerQuestions"
          });
          break;
        case 5:
          this.$router.push({
            path: "addJudge"
          });
          break;
        case 6:
          this.$router.push({
            path: "addExperimental"
          });
          break;
        default:
          console.log(1234);
      }
    },
    //获取章节
    getchapterModel(val) {
      console.log(123123);
      this.addForm.chapterId = val;
    }
  }
};
</script>
<style lang="scss">
@import "./../../../styles/layout/color_variables";

body {
  background: $bg-gray;
}
#AddShortAnswerQuestions.isCreativeCourse {
  margin: 20px auto 30px;
}
#AddShortAnswerQuestions {
  //编辑器设置z-index
  @for $i from 1 through 15 {
    //$item: nth($stars, $i);
    .question-choice {
      &:nth-child(#{$i}) {
        .v-note-wrapper.markdown-body {
          position: relative;
          z-index: 16-$i;
        }
      }
    }
  }
  .fullscreen {
    top: 60px;
    z-index: 99999;
  }
  .courses-nav.jx-content {
    margin-bottom: 0;
  }
  position: relative;
  z-index: 1;
  width: $width;
  margin: 0px auto 30px;
  color: #727272;
  .edit-experimental {
    width: 220px;
    height: 130px;
    position: fixed;
    right: 50px;
    bottom: 290px;
    background: #4d5368;
    color: #fff;
    text-align: center;
    line-height: 130px;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
  }
  .dialog-check {
    p {
      line-height: 60px;
      text-align: center;
    }
    .check-tishi{
      i {
        padding: 0 10px;
        font-size: 20px;
        color: $btn-blue;
      }
    }
    .dialog-b {
      margin-left: -27px;
    }
    .el-dialog__footer {
      text-align: center;
    }
    .el-select .el-input__inner {
      width: 80px;
    }
  }
  .demo-form-inline {
    .button-style {
      margin-top: 4px;
    }
  }
  //保存提交
  .question-submit {
    margin-left: -111px;
  }
  //编辑器
  .v-note-wrapper {
    min-height: 150px;
  }
  .form-group {
  }
  .btn-group {
    text-align: center;
    margin-top: 40px;
  }
  .answer-editor {
    margin-bottom: 60px;
    .v-note-wrapper {
      min-height: 150px;
    }
  }
  .question-editor {
    .jx-title {
      display: flex;
      justify-content: space-between;
    }
  }
  .question-choice {
    display: flex;
    margin-bottom: 40px;
    .question-left {
      color: #727272;
      min-width: 30px;
    }
    .question-center {
      width: 100%;
    }
    .question-right {
      min-width: 140px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .question-del {
        width: 20px;
        height: 20px;
        padding: 0;
        font-size: 24px;
        border-radius: 20px;
        color: $title-gray;
        border: 1px solid $title-gray;
        text-align: center;
        line-height: 6px;
        cursor: pointer;
        &:hover {
          color: #1277eb;
          border: 1px solid #1277eb;
        }
      }
      .question-del.is-disabled {
        &:hover {
          color: #c0c4cc;
          cursor: not-allowed;
          background-image: none;
          background-color: #fff;
          border-color: #ebeef5;
        }
      }
      .question-label {
        .chose-del {
          color: #727272;
          margin-right: 10px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
